<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0;padding-top: 10px" >
        
      <Card :bordered="false" dis-hover class="">
		  <Row type="flex" class="mb20">
		    <Col span="24">
		  	<span style="padding: 0px 0px 20px 0px;display: block;font-weight:bold;">用户信息</span>
		    </Col>
		  </Row>
		  <Form>
			<Row type="flex" :gutter="24">
			  <Col :xs="24">
				<FormItem label="用户昵称:">
				  <div class="add">
					<span>{{data.user.nickname}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="手机号码:">
				  <div class="add">
					<span>{{data.user.new_phone}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="建档时间:">
				  <div class="add">
					<span>{{data.created_time}}</span>
				  </div>
				</FormItem>
			  </Col>
			 </Row>
		  </Form>
      </Card>
    </div>
    
    <!-- 缩略图配置 -->
    <div class="table-box" style="padding-top: 10px">
      <Card :bordered="false" dis-hover class="ivu-mt">
        <Row type="flex" class="mb20">
		  <Col span="24">
			<span style="padding: 0px 0px 20px 0px;display: block;font-weight:bold;">档案信息</span>
		  </Col>
        </Row>
        <Form>
			<Row type="flex" :gutter="24">
			  <Col :xs="24">
				<FormItem label="宠物名称:">
				  <div class="add">
					<span>{{data.name}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="宠物头像:">
				  <div class="add">
					<img :src="data.avatar" style="width: 80px;height:80px;cursor: pointer;" v-viewer >
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="品种:">
				  <div class="add">
					<span>{{data.type_id_name}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="生日:">
				  <div class="add">
					<span>{{data.birthday}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="毛色:">
				  <div class="add">
					<span>{{data.color}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="体重(kg):">
				  <div class="add">
					<span>{{data.weight}}</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="性别:">
				  <div class="add">
					<span v-if="data.sex == 0">弟弟</span>
					<span v-else-if="data.sex == 1">妹妹</span>
					<span v-else>未知</span>
				  </div>
				</FormItem>
			  </Col>
			  <Col :xs="24">
				<FormItem label="是否绝育:">
				  <div class="add">
					<span v-if="data.is_steril == 0">未绝育</span>
					<span v-else>已绝育</span>
				  </div>
				</FormItem>
			  </Col>
			 </Row>
			 <Row type="flex" :gutter="24">
			   <Col :xs="24"> 
				<FormItem label="全身照:">
				  <div class="attach">
					  <div v-if="data.images_arr.length !== 0" v-viewer>
					    <template v-for="i in data.images_arr">
					      <img v-lazy="i" style="width:80px;height:80px;margin-right:10px;margin-bottom: 10px;cursor: pointer;"/>
					    </template>	
					  </div>
				  </div>
				</FormItem>
			   </Col>
			  </Row>
        </Form>
      </Card>
	  
    </div>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';
import uploadPictures from '@/components/uploadPictures';
import { detailApi } from '@/api/archives';

export default {
  components: {},
  data() {
    return {
      saveType: 0,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
	  
	  grid: {
	    xl: 8,
	    lg: 8,
	    md: 8,
	    sm: 24,
	    xs: 24,
	  },
      positionId: 1,
      positiontlt: '',
      formValidate: {
		contract_id:this.$route.params.id
      },
      boxs: [
        { content: '左上', id: 1 },
        { content: '上', id: 2 },
        { content: '右上', id: 3 },
        { content: '左中', id: 4 },
        { content: '中', id: 5 },
        { content: '右中', id: 6 },
        { content: '左下', id: 7 },
        { content: '下', id: 8 },
        { content: '右下', id: 9 },
      ],
      ruleValidate: {},
      configuModal: false,
      configData: '',
	  contractData:{
		  attach:[
			  'https://gas-1318262562.cos.ap-chengdu.myqcloud.com/uploads/20230315/01e5c682b77271739e3f416505c5bfca.jpg',
			  'https://gas-1318262562.cos.ap-chengdu.myqcloud.com/uploads/20230315/01e5c682b77271739e3f416505c5bfca.jpg'
		  ]
	  },
	  data:{},
	  
    };
  },
  created() {
	  
  },
  mounted: function () {
	  
	this.getData();
  },
  methods: {
	getData(){
		let that = this;
		detailApi(this.$route.params.id)
		  .then((res) => {
			  console.info(res)
			  that.data = res.data;
		  })
		  .catch((err) => {
		    this.$Message.error(err.msg);
		  });
	},
    
    
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
/deep/.ivu-input-group .ivu-input {
  border-right: 0px !important;
}
.content /deep/.ivu-form .ivu-form-item-label {
  width: 133px;
}
.topIput {
  width: 186px;
  background: #ffffff;
  border-right: 0px !important;
}
.abbreviation {
  .top {
    display: flex;
    justify-content: flex-start;
    .topBox {
      display: flex;
      .topRight {
        width: 254px;
        margin-left: 36px;
      }
      .topLeft {
        width: 94px;
        height: 94px;

        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        .img {
          // width: 84px;
          height: 67px;
          background: #f7fbff;
          border-radius: 4px;
          margin-bottom: 9px;
          .imgs {
            width: 70px;
            height: 51px;
            display: inline-block;
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .content {
    /deep/.ivu-form-item-label {
      width: 120px;
    }
    .flex {
      display: flex;
      justify-content: flex-start;
      // width: 400px;

      .contentIput {
        width: 400px;
      }
      .conents {
        display: flex;
        .title {
          width: 30px;
          margin-top: 70px;
          margin-left: 6px;
        }
        .positionBox {
          display: flex;
          flex-wrap: wrap;
          width: 101px;
          height: 99px;
          border-right: 1px solid #dddddd;
          .box {
            width: 33px;
            height: 33px;
            // border-radius: 4px 0px 0px 0px;
            border: 1px solid #dddddd;
            cursor: pointer;
          }
          .on {
            background: rgba(24, 144, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.message /deep/ .ivu-table-header thead tr th {
  padding: 8px 16px;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
